<template>
  <div class="login-box">
    <el-input v-model="username" placeholder="Please input" />
    <el-input
        v-model="password"
        type="password"
        placeholder="Please input password"
        show-password
    />
    <div class="login-btn">
      <el-button type="primary" style="width: 100%" @click="handleLogin">登录</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {nextTick, ref} from 'vue'
import { login } from '@/api/user'
// import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import {useRouter} from "vue-router";

let username = ref('admin')
let password = ref('baidu1996')
const router = useRouter()
const isRouterAlive = ref(true)
const appStore:any = userStore()
function reload(): any{
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
function handleLogin ():any {
  login({ username: username.value,password: password.value }).then(res => {
    if (res.code === 200) {
      appStore.userInfo(res.data.token)
    }
  }).finally(() => {
    router.push({ path: "/" });
  })
}
</script>

<style scoped>
.login-box{
  width: 400px;
  height: 600px;
  margin: 300px auto 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.login-btn{
  margin: 20px auto;
}
</style>